<template>
  <div class="slider">
    <div class="wrapper1">
      <div class="list" @touchstart="touchStart" @touchmove="touchMove" @touchend="touchEnd">
        <div class="item" v-for="item in 10" :key="item">{{item}}</div>
      </div>
    </div>
    <div class="wrapper2">
      <div class="list">
        <div
          class="item active"
          v-for="(item,index) in 10"
          :key="item"
          @click="clickItem(index)"
        >{{item}}</div>
      </div>
      <div>{{ i + 1 }}</div>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      i: 1,
    };
  },
  methods: {
    clickItem(index) {
      this.i = index;
    },
    touchStart() {
      console.log(1);
    },
    touchMove() {
      console.log(2);
    },
    touchEnd() {
      console.log(3);
    },
  },
};
</script>
<style lang="scss" scoped>
* {
  margin: 0;
  padding: 0;
}
.slider {
  width: 300px;
  height: 500px;
  margin: 0 auto;
  overflow: hidden;
  background-color: rgb(168, 168, 168);
  position: relative;

  .wrapper1 {
    width: 500px;
    position: absolute;
    .list {
      position: absolute;
      width: 700px;
      background-color: rgb(250, 40, 40);
      z-index: 1;
    }
    .item {
      width: 50px;
      height: 50px;
      background-color: pink;
      margin: 10px;
      float: left;
    }
  }
  .wrapper2 {
    width: 300px;
    background-color: rgb(250, 40, 40);
    position: absolute;
    z-index: 1;
    top: 100px;
    overflow-x: scroll;
    .list {
      width: 700px;
    }
    .item {
      width: 50px;
      height: 50px;
      background-color: pink;
      margin: 10px;
      float: left;
    }
  }
  .wrapper3 {
  }
}
.active:active {
  background-color: blue !important;
}
</style>